<template>
  <div class="news">
    <!-- <h2>News Page</h2> -->
    <div class="leftLang fl">
      <ul>
        <li
        v-for="(lang, index) in langs"
        :class="{'active':ind == index}"
        :key="lang.id"
         @click="langChange(lang.langCode,index)"
      ><span>{{lang.langName}}</span></li>
      </ul>
    </div>
    <div class="content fr">
      <ul>
        <li class="clearfix"
         v-for="newsItem in newsArr"
          :key="newsItem.id"
        >
          <span class="portrait fl"></span>
          <div class="accountInfo fl">
            <h5>{{newsItem.AccountName}}</h5>
            <p>{{newsItem.SubscribeNum}}订阅</p>
          </div>
          <span class="addAttentionIcon fr" v-if="newsItem.isAttention">已关注</span>
          <span class="addAttentionIcon fr" v-if="!newsItem.isAttention">关注 +</span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>

import axios from 'axios'

export default {
  name: 'news',
  data () {
    return {
      msg: 'news',
      langs: [],
      newsArr: [],
      ind: '1'
    }
  },
  created: function(){
    let _this = this;
    axios.get('/static/lang.json').then((res) => {
      _this.langs = res.data.data;
    });
    axios.get('/static/chinese.json').then((res) => {
      _this.newsArr = res.data.data;
    });
  },
  methods: {
    langChange: function (langCode,index) {
      this.ind = index;
      if(langCode){
        axios.get(`/static/${langCode}.json`).then((res) => {
          this.newsArr = res.data.data;
        });
      }
    }
  }
}
</script>

<style lang="scss">

  .news{
    display: flex;
    height:calc(100% - 1px);
    padding-bottom: 40px;
    .leftLang{
      height:100%;
      flex: 1;
      overflow-y: auto;
      overflow-x: hidden;
      background: #F0F0F0;
      ul{
        width:101%;
        li{
          display: flex;
          justify-content: center;
          align-items: center;
          height:60px;
          padding: 0 5px;
          box-sizing: border-box;
          font-size: 18px;
          &.active{
            background: #fff;
            color:#545454;
          }
        }
      }
    }
    .content{
      flex: 6;
      ul{
        li{
          padding:10px 15px;
          box-sizing: border-box;
          border-bottom: 1px solid #DEDEDE;
          .portrait{
            width: 40px;
            height:40px;
            background: #eee;
          }
          .accountInfo{
            padding-left: 10px;
            h5{
              text-align: left;
              font-weight: 400;
            }
            p{
              color:#B5B5B5;
            }
          }
          .addAttentionIcon{
            width: 50px;
            height:30px;
            margin-top: 5px;
            border: 1px solid #1CA3EB;
            border-radius: 3px;
            color:#1CA3EB;
            line-height:30px;
          }
        }
      }
    }
  }
</style>
